<template>
  <div>
    <el-row>
      <span>VIP等级条件设置</span>
    </el-row>
    <el-row class="vip-padding">
      <div class="vip-level-set-title">等级配置</div>
      <el-form :inline="true" ref="ruleForm" :rules="rule" :model="form">
        <el-table :data="form.configs" border>
          <el-table-column label="VIP等级" prop="levelName" align="center">
          </el-table-column>
          <el-table-column label="累计存款+累计上分金额 >=" prop="validInCome" align="center">
            <template slot-scope="{row, $index}">
              <el-form-item :prop="'configs.' + $index + '.validInCome'" :rules="rule.validInCome">
                <el-input  type="text" min="0" :disabled="row.levelName==='VIP0'" v-model="row.validInCome" ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="累计有效投注 >=" prop="validBetting" align="center">
            <template slot-scope="{row, $index}">
              <el-form-item :prop="'configs.' + $index + '.validBetting'" :rules="rule.validBetting">
                <el-input  type="text" min="0" :disabled="row.levelName==='VIP0'" v-model="row.validBetting"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="累计提款次数 >=" prop="withdrawCount" align="center">
            <template slot-scope="{row, $index}">
              <el-form-item :prop="'configs.' + $index + '.withdrawCount'" :rules="rule.withdrawCount">
                <el-input  type="text" min="0" :disabled="row.levelName==='VIP0'" v-model="row.withdrawCount"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="（保级）30天有效投注额 >=" prop="minMaintainValidBetting" align="center">
            <template slot-scope="{row, $index}">
              <el-form-item :prop="'configs.' + $index + '.minMaintainValidBetting'" :rules="rule.minMaintainValidBetting">
                <el-input  type="text" min="0" :disabled="row.levelName==='VIP0'" v-model="row.minMaintainValidBetting"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-row>
    <el-row>
      <div class="tip-wrapper">
        <p><span class="red">* </span>各项不支持小数位输入，仅支持整数，例：1, 10, 100</p>
        <p><span class="red">* </span>各项最小值为0，月提款次数最大为100，其它项无上限</p>
      </div>
    </el-row>
    <el-row class="vip-padding">
      <el-button v-if="roleCheck('condition-setting-save')" type="primary" @click="saveForm">保存</el-button>
      <el-button @click.native="reset">恢复上次设置</el-button>
    </el-row>
  </div>
</template>

<script>
import { factory, form } from '@/build';
import { getVipLevelConfig, saveVipLevelConfig } from '@/services/api/vipManage';

export default {
  name: 'conditionConfig',
  mixins: [factory, form],
  data() {
    return {
      form: {
        configs: [
          {
            level: 7,
            levelName: 'VIP7',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 6,
            levelName: 'VIP6',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 5,
            levelName: 'VIP5',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 4,
            levelName: 'VIP4',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 3,
            levelName: 'VIP3',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 2,
            levelName: 'VIP2',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 1,
            levelName: 'VIP1',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
          {
            level: 0,
            levelName: 'VIP0',
            validInCome: 0,
            validBetting: 0,
            withdrawCount: 0,
            minMaintainValidBetting: 0,
          },
        ],
      },
      resetData: [],
      rule: {
        validInCome: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
            }),
          },
        ],
        validBetting: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
            }),
          },
        ],
        withdrawCount: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
              max: 100,
            }),
          },
        ],
        minMaintainValidBetting: [
          {
            validator: factory.getValidator('proportion', {
              min: 0,
            }),
          },
        ],
      },
    };
  },
  mounted() {
    this.bindGet(getVipLevelConfig, 'form', {
      action: 'getConfig',
      format: (data) => {
        const list = [];
        _.each(this.form.configs, (item) => {
          _.each(data, (val) => {
            if (val.levelName === 'VIP0') {
              val.validInCome = 0;
              val.validBetting = 0;
              val.withdrawCount = 0;
              val.minMaintainValidBetting = 0;
            }
            delete val.upGradeAward;
            delete val.upGradeAwardBR;
            delete val.birthdayAward;
            delete val.birthdayAwardBR;
            delete val.monthlyAward;
            delete val.monthlyAwardBR;
            delete val.rebateTypeConfigs;

            if (item.levelName === val.levelName) {
              Object.assign(item, val);
            }
          });
          list.push(item);
        });
        this.resetData = JSON.stringify(list);
        return { configs: list };
      },
    });
    this.bindSave(saveVipLevelConfig, 'saveForm', 'form', {
      afterSuccess: ([result, data]) => {
        if (result) {
          this.resetData = JSON.stringify(this.form.configs);
        }
      },
    });
    this.doGet({ action: 'getConfig' });
  },
  methods: {
    reset() {
      this.form.configs = JSON.parse(this.resetData);
    },
    saveForm() {
      let flag = false;
      for (let i = 0; i < this.form.configs.length - 1; i++) {
        if (Number(this.form.configs[i + 1].validInCome) > Number(this.form.configs[i].validInCome)) {
          this.$notify({
            title: '高等级的“月累计存款+月累计上分金额”不能小于低等级的',
            type: 'error',
            duration: 2000,
          });
          flag = true;
          return;
        }
      }
      !flag && this.doSave({ action: 'saveForm', form: 'ruleForm' });
    },
  },
};
</script>

<style lang="scss" scoped>
  .vip-padding{
    padding: 20px 20px 0 20px;
    /deep/ .el-form-item--mini.el-form-item{
      margin-top: 18px;
    }
  }
  .vip-level-set-title{
    margin-bottom: 10px;
  }
  .tip-wrapper{
    margin: 5px 0 0 20px;
    p{
      margin: 0;
      font-size: 12px;
      color: #d3d3d3;
      line-height: 18px;

      .red{
        color: red;
      }
    }
  }
</style>
